<template>
  <div>
    <s-header :name='"我的"' :noback="true" />
    <div class="user-info">
      <div class="info">
        <van-image
          round
          width="2rem"
          height="2rem"
          :src="avatar"
        />
        <div>
          <div class="text">
            <span style="">用户名：{{ name }}</span>
            <span style="">昵称：{{ nickName }}</span>
          </div>
          
        </div>
      </div>
    </div>
    <div class="user-list">
      <van-cell-group inset>
        <van-cell title="我的订单" is-link icon="" to="/order-list" />
        <van-cell title="我的足迹" is-link icon="" />
        <van-cell title="地址管理" is-link icon="" to="/address" />
        <van-cell title="账户管理" is-link icon="" to="/profile" />
      </van-cell-group>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>

<script>

import  sHeader  from '@/components/SHeader';
import NavBar from '@/components/NavBar.vue';
import { mapGetters } from 'vuex';


export default {
  name: 'MineView',
  components: {
    sHeader,
    NavBar,
  },
  data() {
    return {

    }
  },
  computed: {
    ...mapGetters(['name', 'nickName', 'avatar'])
  }
}
</script>

<style lang="scss">
  .user-info {
    width: 94%;
    margin: 10px;
    height: 120px;
    background: linear-gradient(90deg,#cb1f1f,#e24b4b);
    box-shadow: 0 3px 3px #ac1d1d;
    border-radius: 20px;
    .info { 
      position: relative;
      display: flex;
      padding: 22px 20px;
    }
    .text {
      display: flex;
      flex-direction: column;
      padding: 15px;
      font-size: 16px;
      color: aliceblue;
    }
  }
</style>